<template>
<div>
    <Button @click="handleShowCommoditySelectModal">选择商品</Button>
    <table v-if="showPage" class="minitable" mgt2 long text-center>
        <tr bg-gray5>
            <td>#</td>
            <td>分类</td>
            <td>商品名称</td>
            <td w4>操作</td>
        </tr>
        <tr v-for="(item, index) in ids" :key="index">
            <td>{{index+1}}</td>
            <td>{{commodityMap[item].classes.join(',')}}</td>
            <td>
                <span v-if="commodityMap[item].name">{{commodityMap[item].name}}</span>
                <span v-else red>失效的商品</span>
            </td>
            <td><span linkable blue @click="handleDeleteCommodity(index)">删除</span></td>
        </tr>
    </table>

    <commodity-select v-model="showCommoditySelectModal" @save-success="handleSaveSuccess"></commodity-select>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import CommoditySelect from './commodity-select.vue'

@Component({
    components: { CommoditySelect }
})
export default class CommoditySelectList extends AbpBase{
    @Prop() model:any;
    @Prop({type:String, default:'appliedCommodityIds'}) prop:String;
    showCommoditySelectModal:Boolean = false;
    get ids() {
        return this.model[this.prop];
    }
    get commodityMap() {
        return this.$store.state.website.commodityMap;
    }
    handleShowCommoditySelectModal() {
        this.showCommoditySelectModal = true;
    }
    async handleSaveSuccess(items) {
        var ids = items.map(elem => elem.id);
        var temp = [];
        ids.forEach(elem => {
            if(this.model[this.prop].indexOf(elem) == -1) {
                temp.push(elem);
            }
        });
        this.model[this.prop] = this.model[this.prop].concat(temp);
        await this.getCommodityProfiles();
    }
    handleDeleteCommodity(index) {
        this.model[this.prop].splice(index, 1);
    }
    async getCommodityProfiles() {
        this.showPage = false;
        await this.$store.dispatch('website/getCommodityProfiles', this.ids);
		this.showPage = true;
    }
    @Watch('model')
    async handleOnModelChange() {
        await this.getCommodityProfiles();
    }
}
</script>

<style>

</style>
